<template>
  <div class="monthtjDetail">
    <el-calendar v-model="attendanceDate" format="yyyy-MM-dd">
      <div
        slot="dateCell"
        slot-scope="{ data }"
        @click="claender(data.day)"
        style="width: 100%; height: 100%"
      >
      <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
    </p>
      </div>
    </el-calendar>
    <div class="dayDetail">
      <p>当日考勤记录：</p>
      <div>
        <p>
          考勤日期：<span>{{ detailInfo? detailInfo.attendanceDate:'' }}</span>
        </p>
        <p>
          考勤类型：<span
          v-if="detailInfo"
            v-html="
              detailInfo.attencdanceType === 0
                ? '出勤'
                : detailInfo.attencdanceType === 1
                ? '事假'
                : detailInfo.attencdanceType === 2
                ? '病假'
                : detailInfo.attencdanceType === 3
                ? '未出勤'
                : ''
            "
          ></span>
        </p>
        <p>
          到校时间：<span>{{ detailInfo ? detailInfo.inTime : '' }}</span>
        </p>
        <p>
          离校时间：<span>{{ detailInfo ? detailInfo.outTime : '' }}</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { teacherDeatilsList } from "@/api/base/teacher";
import { formatTimeDate } from "@/utils";
export default {
  name: "",
  data() {
    return {
      attendanceDate: new Date(),
      personCode: this.$route.query.id,
      detailInfo: {},
    };
  },
  components: {},
  computed: {},
  mounted() {
    this.teacherDeatilsList();
  },
  methods: {
    claender(val1) {
      this.teacherDeatilsList(val1);
    },
    async teacherDeatilsList(val) {
      this.detailInfo = {};
      const obj = {
        personCode: this.personCode,
        attendanceDate: val ? val : this.attendanceDate,
      };
      const { data, code, msg } = await teacherDeatilsList(obj);
      if (code === 200) {
        this.detailInfo = data[0];
      } else {
        this.$message.error(msg);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.el-calendar {
  width: 65%;
}

.monthtjDetail {
  display: flex;

  .dayDetail {
    margin: 30px;

    & > p {
      font-weight: 600;
      font-size: 20px;
    }

    & > div {
      padding: 0px 40px;

      p {
        font-weight: 600;
        font-size: 18px;
      }
    }
  }
}

// ::v-deep .el-calendar__button-group{
//         display: none;
//     }
.is-selected {
    color: #1989FA;
  }
</style>
